<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍购物车结算</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <table v-if="books.length > 0">
        <caption>购物车结算</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>书籍名称</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>单价</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
            <tr v-for="(item, index) in books">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.press }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <button v-on:click="decrease(index)" v-bind:disabled="item.count <=1">-</button>
                    {{ item.count }}
                    <button v-on:click="increase(index)">+</button>
                </td>
                <td>
                    <button v-on:click="deleteItem(index)">删除</button>
                </td>
            </tr>

            <tr>
<!--                <td colspan="6" style="text-align: right;">总价</td>-->
                <td colspan="6" >总价</td>
                <td>{{ totalPrice }}</td>
            </tr>
        </tbody>
    </table>

    <div>购物车为空，请添加商品</div>
</div>
<script type="module" src="main.js">
</script>
</body>
</html>